<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>Particles</title>
		<script th:src="@{js/jquery-1.10.2.min.js}" type="text/javascript"></script>
	    <script th:src="@{js/canvas-particle.js}" type="text/javascript"></script>
    <style>

		*{
			margin: 0;
			padding: 0;
			font-family: "微软雅黑";
		}
		html,body{  
			height: 100%; 
			width: 100%;
		}  
        body {
            background-color: #FFFFFF;
        }
		#mydiv{
			width:100%;
            height: 100%;
			background: url(img/login-background.jpg) no-repeat center 0px ;
			background-size:100% 100%;  
		}
			
			.form {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -185px;
				margin-top: -210px;
				height: 420px;
				width: 340px;
				font-size: 18px;
				-webkit-box-shadow: 0px 0px 10px #A6A6A6;
				background: #fff;
				z-index:2;
				box-shadow: -15px 15px 15px rgba(0,5, 5, 0.7);
				opacity: 1;
				background: linear-gradient(230deg, rgba(53, 57, 74, 0) 0%, rgb(0, 0, 0) 100%);
			}
			.border-btn {
				border-bottom: 1px solid #ccc;
			}
			
			#landing,
			#registered {
				float: left;
				text-align: center;
				width: 170px;
				padding: 15px 0;
				color: #FFFFFF;
			}
			
			#landing-content {
				clear: both;
			}
			
			.inp {
				height: 30px;
				margin: 0 auto;
				margin-bottom: 30px;
				width: 200px;
			}
			
			.inp>input {
				text-align: center;
				height: 30px;
				width: 200px;
				margin: 0 auto;
				transition: all 0.3s ease-in-out;
			}
			
			.login {
				border: 1px solid #A6A6A6;
				color: #a6a6a6;
				height: 30px;
				width: 202px;
				text-align: center;
				font-size: 13.333333px;
				margin-left: 70px;
				line-height: 30px;
				margin-top: 30px;
				transition: all 0.3s ease-in-out;
			}
			
			.login:hover {
				background: #A6A6A6;
				color: #fff;
			}
			
			#bottom {
				margin-top: 30px;
				font-size: 13.333333px;
				color: #a6a6a6;
			}
			
			#registeredtxt {
				float: left;
				margin-left: 80px;
			}
			
			#forgotpassword {
				float: right;
				margin-right: 80px;
			}
			
			#photo {
				border-radius: 80px;
				border: 1px solid #ccc;
				height: 80px;
				width: 80px;
				margin: 0 auto;
				overflow: hidden;
				clear: both;
				margin-top: 30px;
				margin-bottom: 30px;
			}
			
			#photo>img:hover {
				-webkit-transform: rotateZ(360deg);
				-moz-transform: rotateZ(360deg);
				-o-transform: rotateZ(360deg);
				-ms-transform: rotateZ(360deg);
				transform: rotateZ(360deg);
			}
			
			#photo>img {
				height: 80px;
				width: 80px;
				-webkit-background-size: 220px 220px;
				border-radius: 60px;
				-webkit-transition: -webkit-transform 1s linear;
				-moz-transition: -moz-transform 1s linear;
				-o-transition: -o-transform 1s linear;
				-ms-transition: -ms-transform 1s linear;
			}
			
			
			#registered-content {
				margin-top: 40px;
				display: none;
			}
			
			.fix {
				clear: both;
			}
			.form{
				display: none;
			}
			canvas{
				z-index:1 !important;
			}
    </style>
</head>

<body>
    <!-- 背景div -->
    <div id="mydiv">
		<div class="form">
			<div id="landing">登陆</div>
			<div id="registered">注册</div>
			<div class="fix"></div>
			<div id="landing-content">
				<div id="photo"><img src="img/photo.jpg" /></div>
				<div class="inp"><input type="text" placeholder="用户名" /></div>
				<div class="inp"><input type="password" placeholder="密码" /></div>
				<div class="login">登录</div>
				<div id="bottom"><span id="registeredtxt">立即注册</span><span id="forgotpassword">忘记密码</span></div>
			</div>
			<div id="registered-content">
				<div class="inp"><input type="text" placeholder="请输入用户名" /></div>
				<div class="inp"><input type="password" placeholder="请输入密码" /></div>
				<div class="inp"><input type="password" placeholder="请再次输入密码" /></div>
				<div class="inp"><input type="text" placeholder="电子邮箱" /></div>
				<div class="login">立即注册</div>
			</div>
		</div>	
	</div>
    <script type="text/javascript">
        window.onload = function () {
				$(".form").slideDown(500);
				
				$("#landing").addClass("border-btn");

				$("#registered").click(function() {
					$("#landing").removeClass("border-btn");
					$("#landing-content").hide(500);
					$(this).addClass("border-btn");
					$("#registered-content").show(500);
					
				})

				$("#landing").click(function() {
					$("#registered").removeClass("border-btn");
					$(this).addClass("border-btn");
					
					$("#landing-content").show(500);
					$("#registered-content").hide(500);
				})
            //配置
            var config = {
                vx: 4, //小球x轴速度,正为右，负为左
                vy: 4, //小球y轴速度
                height: 2, //小球高宽，其实为正方形，所以不宜太大
                width: 2,
                count: 200, //点个数
                color: "255, 255 ,255", //点颜色
                stroke: "255, 255 ,255", //线条颜色
                dist: 6000, //点吸附距离
                e_dist: 20000, //鼠标吸附加速距离
                max_conn: 10 //点到点最大连接数
            }

            //调用
            CanvasParticle(config);
        }
    </script>

</body>

</html>
